<template>
  <div class="switch">
    <span>{{ buttonTitle }}</span>
    <div class="isToggleOn"
      :style="{ justifyContent: isToggleOnValue ? 'end' : 'start', background: isToggleOnValue ? '#09c012' : '#f00' }"
      @click="Aiswitch">
      <div class="circle"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { type IEmits } from './emits';

const props = defineProps(['buttonTitle'])

const isToggleOnValue = defineModel({ type: Boolean, default: false });
const emits = defineEmits<IEmits>();

const Aiswitch = () => {
  isToggleOnValue.value = !isToggleOnValue.value
  emits('sendstart', isToggleOnValue.value)
}


</script>

<style>
.switch {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.isToggleOn {
  width: 40px;
  height: 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  background-color: red;
  padding: 0 3px;
}

.circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: ease 1s;
}
</style>